<template>
    <div class="img-upload" style="width: 100%">
        <el-upload
                ref="imgUpload"
                list-type="text"
                :disabled="disabled"
                :accept="this.$constant.MIME.IMAGE"
                :show-file-list="false"
                :action="this.$constant.API.COMMON.UPLOAD"
                :http-request="upload">
            <div v-loading="uploading" class="upload-wrap">
                <img v-if="url" :src="url" @click="disabled=false"/>
                <i v-if="!url" class="el-icon-plus avatar-uploader-icon"></i>
                <i v-if="url" class="el-icon-close" @click="removeImgUrl"></i>
            </div>
        </el-upload>
    </div>
</template>

<script>
    let events = {
        UPLOADED: 'uploaded',
        REMOVED: 'removed'
    }

    export default {
        props: {
            imgUrl: {
                type: String,
                default: null
            }
        },
        watch: {
          imgUrl(val) {
              this.url = val
          }
        },
        created() {
            this.url = this.imgUrl
            this.disabled = !!this.imgUrl
        },
        data() {
            return {
                uploading: false,
                disabled: false,
                url: null,
            }
        },
        methods: {
            upload({file, type}) {
                this.uploading = true
                this.disabled = true
                this.$service.common.upload(file).then((res) => {
                    this.url = res
                    this.uploading = false
                    this.$refs.imgUpload.clearFiles()
                    this.$emit(events.UPLOADED, this.url)
                })
            },
            removeImgUrl() {
                this.url = null
                this.$emit(events.REMOVED)
                setTimeout(() => {
                    this.disabled = false
                },100)
            }
        }
    };
</script>

<style lang="scss" scoped>
    .img-upload {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;

        .upload-wrap {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            height: 120px;
            width: 120px;
            cursor: pointer;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            margin-right: 10px;
            position: relative;

            .el-icon-plus {
                font-size: 28px;
                color: #8c939d;
            }

            .el-icon-close {
                position: absolute;
                right: 5px;
                top: 5px;
                background-color: #f56c6c;
                color: #fff;
                border-radius: 100%;
                padding: 2px;

                &:hover {
                    background-color: red;
                }
            }

            img {
                height: 100%;
                width: 100%;
                border-radius: 6px;
            }
        }
    }
</style>
